<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3"><el-input v-model="form.full_name" placeholder="请输入姓名" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="form.username" placeholder="请输入账号" size="small"></el-input></el-col>
      <el-col :span="3"><el-input v-model="form.mobile" placeholder="请输入手机号" size="small"></el-input></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn()">搜索</el-button></el-col>
    </el-row>
    <el-row class="btnBox">
      <el-col v-if="this.menuList.includes('resetUserPermission')" :span="2" :offset="20"><el-button type="primary" plain size="small" @click="resetFn">重置密码</el-button></el-col>
      <el-col v-if="this.menuList.includes('storeUserPermission')" :span="2"><el-button type="primary" size="small" @click="addPersonnel">添加人员</el-button></el-col>
    </el-row>
    <div class="table">
      <el-table :data="tableData" :menuList="this.menuList" v-loading="tableConfig.load" :style="tableConfig.style" :max-height="tableConfig.maxHeight" :border=tableConfig.border :size="tableConfig.size" @selection-change="handleSelectionChange">
        <el-table-column v-if="tableConfig.selection === true" type="selection" width="55"> </el-table-column>
          <template v-for="(item, index) of tableConfig.config">
            <el-table-column v-if="item.id === 'operation'" :key="index" :prop="item.id" :label="item.name" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
              <template slot-scope="scope">
                <el-button @click="operation('edit', scope.row)" v-if="scope.row.full_name !== '超级管理员' && menuList.includes('editUserPermission')" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
            <el-table-column v-else :label="item.name" :key="index" :prop="item.id" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :type="item.type"></el-table-column>
          </template>
      </el-table>
    </div>
    <div class="page">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </div>
    <!-- 新增 -->
    <add-personnel v-if="this.isAddPersonnel" :isAddPersonnel="this.isAddPersonnel" @noAddPersonnel="noAddPersonnel"></add-personnel>
    <!-- 编辑 -->
    <edit-personnel v-if="this.isEditPersonnel" :isEditPersonnel="this.isEditPersonnel" :row="this.row" @noEditPersonnel="noEditPersonnel"></edit-personnel>
  </div>
</template>
<script>
import simpleTable from '@/components/table.vue'
import {APIMEMBERGETLIST, APIMEMBERBATCHMODIFYPASSWORD} from '@/common/api.js'
import addPersonnel from './addPersonnel.vue'
import editPersonnel from './editPersonnel.vue'
export default {
  components: {
    simpleTable,
    addPersonnel,
    editPersonnel
  },
  data () {
    return {
      menuList: [],
      form: {
        username: '',
        full_name: '',
        mobile: ''
      },
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: true,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'full_name', name: '姓名'},
          {id: 'sex_name', name: '性别'},
          {id: 'username', name: '账号'},
          {id: 'mobile', name: '手机号'},
          {id: 'role_name', name: '角色'},
          {id: 'status_title', name: '状态'}
        ]
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10,
      resetList: [],
      isAddPersonnel: false,
      isEditPersonnel: false
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    if (this.menuList.includes('editUserPermission')) {
      var operation = {id: 'operation', name: '操作', list: [{id: 'edit', name: '编辑'}]}
      this.tableConfig.config.push(operation)
    }
    this.tableList()
  },
  methods: {
    tableList () {
      this.form.page = this.page
      this.form.limit = this.limit
      APIMEMBERGETLIST(this.form).then((res) => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
        } else {
          this.tableData = []
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.tableList()
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    resetFn () {
      if (this.resetList.length > 0) {
        var uid = []
        this.resetList.forEach(item => {
          uid.push(item.id)
        })
        APIMEMBERBATCHMODIFYPASSWORD({
          uid: uid.toString()
        }).then((res) => {
          this.$message.success(res.msg)
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      } else {
        this.$message.error('请选择人员')
      }
    },
    operation (id, val) {
      console.log(val)
      if (id === 'edit') {
        this.editPersonnel(val)
      }
    },
    handleSelectionChange (val) {
      this.resetList = val
    },
    addPersonnel () { // 添加
      this.isAddPersonnel = true
    },
    noAddPersonnel (type) {
      this.isAddPersonnel = false
      if (type === 1) {
        this.tableList()
      }
    },
    editPersonnel (e) { // 编辑
      this.row = e
      this.isEditPersonnel = true
    },
    noEditPersonnel (type) {
      this.isEditPersonnel = false
      if (type === 1) {
        this.tableList()
      }
    }
  }
}
</script>
